<template>
  <div style="position: relative; height: 100vh">
    <!-- 注册界面 -->
    <div style="display: flex; width: 100vw; position: relative">
      <van-icon
        name="cross"
        size="6vw"
        style="top: 3vw; left: 3vw"
        @click="backIndex"
      />
      <div
        style="position: absolute; right: 3vw; top: 3vw"
        @click="returnLogin"
      >
        登录
      </div>
    </div>
    <!-- logo -->
    <div style="width: 100vw; display: flex">
      <img
        src="../../assets/app-logo11.png"
        alt=""
        style="width: 300px; margin: auto"
      />
    </div>
    <div style="width: 100vw; display: flex; flex-wrap: wrap">
      <div style="margin: auto">
        <van-cell-group class="zh">
          <van-field
            style="width: 100vw"
            v-model="uname"
            label="账号"
            placeholder="请输入用户名"
            :left-icon="require(`../../assets/zh.png`)"
            @blur="checkUemail"
          />
        </van-cell-group>
        <span v-show="show" id="email_message" class="message"
          >请确认用户名</span
        >
      </div>
      <div style="margin: auto">
        <van-cell-group>
          <van-field
            style="width: 100vw"
            v-model="password1"
            type="password"
            label="密码"
            placeholder="请输入密码"
            :left-icon="require(`../../assets/mm.png`)"
            @blur="checkUpwd1"
          />
        </van-cell-group>
        <span v-show="show1" id="upwd_message" class="message">请确认密码</span>
      </div>
      <div style="margin: auto">
        <van-cell-group>
          <van-field
            style="width: 100vw"
            v-model="password2"
            type="password"
            label="确认密码"
            placeholder="请确认密码"
            :left-icon="require(`../../assets/mm.png`)"
            @blur="checkUpwd2"
          />
        </van-cell-group>
        <span v-show="show2" id="upwd_message" class="message">请确认密码</span>
        <span v-show="show3" id="upwd_message" class="message"
          >密码不能为空</span
        >
        <span v-show="show4" id="upwd_message" class="message"
          >两次密码不一致</span
        >
      </div>
      <div>
        <van-field
          style="width: 100vw"
          v-model="sms"
          center
          clearable
          label="短信验证码"
          placeholder="请输入短信验证码"
          :left-icon="require(`../../assets/yzm.png`)"
        >
          <template #button>
            <van-button
              size="small"
              color="#f03d37"
              :disabled="disabled"
              @click="sendCode"
              >{{ codeMsg }}</van-button
            >
          </template>
        </van-field>
      </div>
    </div>
    <div style="margin-top: 40px; display: flex">
      <button class="login" @click="check">注册</button>
    </div>
  </div>
</template>

<script>
import httpApi from "@/http";
import { Toast } from "vant";

export default {
  data() {
    return {
      uname: "",
      password1: "",
      password2: "",
      show: false,
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      sms: "",
      code: "",
      checked: false,
      disabled: false,
      yzm: "",
      codeNum: 6,
      codeMsg: "发送验证码",
      reg_time: "",
      phones: [],
      rep: true,
      phone: "",
      form: {
        phone: "",
        pwd: "",
        nickname: "",
        reg_time: "",
      },
    };
  },
  methods: {
    backIndex() {
      this.$router.push("/home/index");
    },
    returnLogin() {
      this.$router.push("/login");
    },
    checkUemail() {
      let exp = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
      if (exp.test(this.uname)) {
        this.show = false;
      } else {
        this.show = true;
      }
    },
    // 密码格式验证
    checkUpwd1() {
      let exp = /^[0-9]{6,18}$/;
      if (exp.test(this.password1)) {
        this.show1 = false;
      } else {
        this.show1 = true;
      }
    },
    // 密码格式验证
    checkUpwd2() {
      let exp = /^[0-9]{6,18}$/;
      if (this.password2.length == 0) {
        this.show3 = true;
        this.show4 = false;
        // this.show2 = false
      } else if (this.password2 !== this.password1) {
        this.show4 = true;
        this.show3 = false;
      } else if (!exp.test(this.password2)) {
        this.show2 = true;
        this.show4 = false;
        this.show3 = false;
      } else {
        this.show4 = false;
        this.show3 = false;
      }
    },
    // 验证码验证
    sendCode() {
      // console.log(this.uname);
      let exp = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
      if (this.uname === "") {
        Toast.fail("手机号不能为空！");
      } else if (exp.test(this.uname)) {
        //请求验证码接口
        this.phones.forEach((phone) => {
          if (phone == this.uname) {
            this.rep = false;
            return;
          }
        });
        if ((this.rep = false)) {
          this.disabled = true;
          Toast.fail("手机号已注册!");
        } else {
          let phone = this.uname;
          this.form.pwd = this.password1;
          this.form.nickname = `用户${this.uname}`;
          this.form.reg_time = this.reg_time;
          console.log(this.form);
          let exp2 =
            /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
          if (exp2.test(this.uname)) {
            httpApi.loginApi.queryPhone({ phone }).then((res) => {
              //   console.log(res);        //验证码控制台数据
              if (res.data.data.success) {
                this.code = res.data.data.data;
                // console.log("11", this.code);
              }
              if (res.data.code == 400) {
                Toast.fail("手机号已注册!");
                this.disabled = true;
                return false;
              }
            });
          }
        }

        this.disabled = true;
        let timer = setInterval(() => {
          --this.codeNum;
          this.codeMsg = `重新发送 ${this.codeNum}`;
        }, 1000);
        setTimeout(() => {
          clearInterval(timer);
          this.codeNum = 6;
          this.disabled = false;
          this.codeMsg = "发送验证码";
        }, 6000);
      }
    },

    // 注册按钮验证
    check() {
      this.phones.forEach((phone) => {
        if (phone == this.uname) {
          this.rep = false;
          return;
        }
      });
      if ((this.rep = false)) {
        Toast.fail("手机号已注册!");
      } else {
        this.form.phone = this.uname;
        this.form.pwd = this.password1;
        this.form.nickname = `用户${this.uname}`;
        this.form.reg_time = this.reg_time;
        console.log(this.form);
        let exp = /^[0-9]{6,18}$/;
        let exp1 = /^[0-9]{6,18}$/;
        let exp2 = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;

        if (
          exp.test(this.password1) &&
          exp1.test(this.password2) &&
          exp2.test(this.uname) &&
          this.code == this.sms
        ) {
          httpApi.loginApi.queryAddUser(this.form).then((res) => {
            console.log(res);
            if (res.data.code == 200) {
              Toast.fail("注册成功!");
              this.$router.push("/login");
            } else if (res.data.code == 400) {
              Toast.fail("手机号已注册!");
            }
          });
        } else {
          console.log(this.sms);
          console.log(this.code);
          Toast.fail("请确认无误后注册！");
        }
      }
    },
  },
  mounted() {
    this.reg_time = new Date();
    httpApi.loginApi.selectAll().then((res) => {
      // console.log('所有电话号',res.data.data)
      // res.data = res.data.data
      // console.log(res.data.data)
      let arr = res.data.data;
      arr.forEach((el) => {
        this.phones.push(el.phone);
      });
      // console.log(this.phones);
    });
  },
};
</script>

<style lang="scss" scoped>
.login {
  color: #fff;
  background-color: #f03d37;
  width: 80%;
  height: 5vh;
  margin: auto;
  border-radius: 20px;
  border: none;
}
.message {
  box-sizing: border-box;
  width: 100%;
  margin: auto;
  display: flex;
  justify-content: end;
  font-size: 8px;
  color: red;
}
</style>
